import 'package:flutter/material.dart';

class CommunityPageWidget extends StatefulWidget {
  @override
  _CommunityPageWidgetState createState() => _CommunityPageWidgetState();
}

class _CommunityPageWidgetState extends State<CommunityPageWidget> {

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('发现'),
      ),
      body: Container(
        color: Color.fromRGBO(1, 1, 1, 0.01),
        child: ListView(
          padding: EdgeInsets.only(left: 5,right: 5),
          children: [
            _buildSectionHeader('images/find_square_explore.png','一直在发现，从未停止', (){}),
            _buildExplorationCell(),
            _buildSectionHeader('images/find_square_question.png','回答之间，心有余香', (){}),
            _buildQuestionCell(),
            _buildSectionHeader('images/find_square_strategy.png','攻略', (){}),
            _buildStrategyCell()
          ],
        ),
      )
    );
  }

  Widget _buildSectionHeader(String icon, String title, Function callback){
    return Container(
      height: 50,
      child: Row(
        children: [
          Container(
            padding: EdgeInsets.only(right: 10,left: 5),
            child: Image.asset(icon,width: 24,height: 24,),
          ),
          Expanded(child: Text(title)),
          Container(
            width: 50,
            child: Row(
              children: [
                Text('更多'),
                Image.asset('images/icon_arrow_right.png',width: 15,height: 15)
              ],
            ),
          )
        ],
      ),
    );
  }

  //  探店Cell
  Widget _buildExplorationCell(){
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Container(
            child: Stack(
              children: [
                Image.asset('images/home_topCell_bg.png'),
                Positioned(
                    right: 5,
                    bottom: 5,
                    height: 30,
                    width: 100,
                    child: Container(
                      color: Colors.white,
                    )
                )
              ],
            ),
          ),
          Container(
            height: 40,
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 3),
            child: Text('大师保养'),
          ),
          Container(
            padding: EdgeInsets.only(left: 5),
            height: 40,
            child: Row(
              children: [
                ClipOval(child: Image.asset('images/home_category_item_all.png',width: 24,),),
                Container(width: 5,),
                Text('快乐小九')
              ],
            ),
          )
        ],
      ),
    );
  }
  //  问答Cell
  Widget _buildQuestionCell(){
    return Container(
      padding: EdgeInsets.all(10),
      color: Colors.white,
      child: Column(
        children: [
          Container(
            height: 30,
            child: Row(
              children: [
                ClipOval(child: Image.asset('images/home_category_item_all.png',width: 24,),),
                Container(width: 5,),
                Text('快乐小九')
              ],
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Text('预付卡和购物卡的区别是什么？'),
          ),
          Container(
            margin: EdgeInsets.only(top: 5),
            height: 80,
            color: Colors.yellow,
            child: GridView(
              physics: new NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 1.0,
                  crossAxisSpacing: 5,
                  mainAxisSpacing:5
              ),
              children: [
                Container(color: Colors.green,),
                Container(color: Colors.red,),
                Container(color: Colors.blue,),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 5),
            padding: EdgeInsets.all(5),
            color: Colors.black12,
            alignment: Alignment.centerLeft,
            child: Text('回复者：说得很详细，学习了'),
          ),
          Container(
            margin: EdgeInsets.only(top: 5),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    child: Text('2021-01-14 16:00'),
                  ),
                ),
                Container(
                  alignment: Alignment.centerRight,
                  child: Row(
                    children: [
                      Icon(Icons.message,size: 20,),
                      Container(width: 2,),
                      Text('2')
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
  //  攻略Cell
  Widget _buildStrategyCell(){

    return Container(
      height: 200,
      child: Flex(
        direction: Axis.horizontal,
        children: [
          Expanded(
            flex: 1,
              child: Container(
                margin: EdgeInsets.only(left: 10,right: 10),
                color: Colors.blue,
                child: Column(
                  children: [
                    Container(
                      child: Image.asset('images/home_topCell_bg.png',),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text('泡脚出汗胜良药'),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        border: Border(
                          top: BorderSide(
                            width: 0.5,
                            color: Colors.black12
                          )
                        )
                      ),
                      height: 30,
                      alignment: Alignment.center,
                      child: Row(
                        children: [
                          Expanded(
                            child: Container(
                                child: Stack(
                                  children: [
                                    Align(
                                      alignment: Alignment.center,
                                      child: Container(
                                        width: 30,
                                        child: Row(
                                          children: [
                                            Icon(Icons.grade,size: 16,),
                                            Container(
                                              margin: EdgeInsets.only(left: 2),
                                              child: Text('1'),)
                                          ],
                                        ),
                                      ),
                                    )
                                  ],
                                )
                            ),
                          ),
                          Container(width: 1,color: Colors.black12,height: 30,),
                          Expanded(
                              child: Container(
                                child: Stack(
                                  children: [
                                    Align(
                                      alignment: Alignment.center,
                                      child: Container(
                                        width: 30,
                                        child: Row(
                                          children: [
                                            Icon(Icons.comment,size: 16,),
                                            Container(
                                              margin: EdgeInsets.only(left: 2),
                                              child: Text('1'),)
                                        ],
                                      ),
                                    ),)
                                  ],
                                )
                              )
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
          ),
          Expanded(
              flex: 1,
              child: Container()
          )
        ],
      ),
    );
  }
}